<template>
  <div>
    <el-button @click="showDialog">新增</el-button>
    <el-table :data="modelValue" style="width: 100%">
      <el-table-column prop="index" label="序号" width="180" type="index" align="center" />
      <el-table-column prop="name" label="名称" width="180" align="center" />
      <el-table-column prop="area" label="建筑面积" align="center"/>
      <el-table-column label="操作" align="center" width="200">
        <template #default="{row, $index}">
          <el-button size="small" @click="handleEdit($index)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete($index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑记录' : '新增记录'">
      <el-form :model="formData" label-width="120px">
        <el-form-item label="名称">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="建筑面积">
          <el-input v-model="formData.area" />
        </el-form-item>
        <el-form-item label="地图选点">
          <el-input v-model="formData.location" placeholder="点击选择位置" @click="selectLocation" />
        </el-form-item>

        <el-form-item label="是否在运营">
          <el-radio-group v-model="formData.operation">
            <el-radio-button label="1" value="1" border>是</el-radio-button>
            <el-radio-button label="2" value="2" border>否</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="建设年份 ">
          <el-input v-model="formData.bulidyear" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formData.other" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { defineEmits, ref, watch } from "vue";
import { Form } from "ant-design-vue";

const formItemContext = Form.useInjectFormItemContext();
const emits = defineEmits(["update:modelValue", "change", "blur"]);
const getServiceLabel = (value: string) => {
  const option = serviceOptions.find(opt => opt.value === value);
  return option ? option.label : value;
};

const props = defineProps({
  componentSchema: {
    default: () => ({}),
    type: Object,
  },
  modelValue: {
    default: () => ([]),
    type: Array,
  },
});
const serviceOptions = [
  { label: '儿童娱乐', value: 'yangplay' },
  { label: '老年活动', value: 'oldactivities' },
  { label: '体育健身', value: 'sportsfitness' },
  { label: '体育器材', value: 'sportsequipment' },
  { label: '围网设施', value: 'fencefacilities' },
  { label: '照明系统', value: 'lightingsystem' },
  { label: '标识系统', value: 'identificationsystem' }
];

const dialogVisible = ref(false);
const isEdit = ref(false);
const currentIndex = ref(-1);

const formData = ref({
  name: '',
  area: '',
  location: '',
  operation: '',
  bulidyear: '',
  other: '',
});

const showDialog = () => {
  isEdit.value = false;
  formData.value = {
    name: '',
    area: '',
    location: '',
    operation: '',
    bulidyear: '',
    other: '',
  };
  dialogVisible.value = true;
};

const handleEdit = (index) => {
  isEdit.value = true;
  currentIndex.value = index;
  formData.value = { ...props.modelValue[index] };
  dialogVisible.value = true;
};

const handleDelete = (index) => {
  const newData = [...props.modelValue];
  newData.splice(index, 1);
  emits("update:modelValue", newData);
  formItemContext.onFieldChange();
};

const handleConfirm = () => {
  const newData = [...props.modelValue];

  if (isEdit.value) {
    newData[currentIndex.value] = formData.value;
  } else {
    newData.push(formData.value);
  }

  emits("update:modelValue", newData);
  formItemContext.onFieldChange();
  dialogVisible.value = false;
};

const selectLocation = () => {
  // 这里实现地图选点逻辑
  // 示例：模拟选择位置
  formData.value.location = "北京市朝阳区XXX街道";
};

// 保留原有的 watch 逻辑
const value = ref("");
watch(value, (e) => {
  emits("update:modelValue", e);
  formItemContext.onFieldChange();
});

watch(
    () => props.modelValue,
    (e) => {
      if (e && e.length > 0) {
        value.value = e;
      }
    },
    { immediate: true }
);
</script>
<style scoped>
.el-tag {
  margin-right: 5px;
}
</style>

